import { LeftOutline } from 'antd-mobile-icons';
import { Form, Input, Toast,NavBar } from 'antd-mobile';
import React, { Component } from 'react';
import '../styles/Register.scss'
import {user_findphone} from "../api/index";

class Register extends Component {
    constructor(props) {
        super(props)
        this.state = {
            active: false
        }
    }
    // 点击下一步
    async next() {
        // console.log(this.refs.fromRef.getFieldValue());
        var reg = /^1[3-9]\d{9}$/
        var res = reg.test(this.refs.fromRef.getFieldValue().phone)
        if (res) {
            var res2 = await user_findphone({ tel: this.refs.fromRef.getFieldValue().phone })
            console.log(res2);
            if (res2.data.code == 200) {
                this.props.history.push({ pathname: '/register2', state: { phone: this.refs.fromRef.getFieldValue().phone } })
            }
        }
    }
    // 输入的数据
    kk(changedValues) {
        // console.log(changedValues);
        var reg = /^1[3-9]\d{9}$/
        var res = reg.test(changedValues.phone)
        if (res) {
            this.setState({ active: true })
        }
        else {
            this.setState({ active: false })
        }
    }
    // 返回
    back() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='register'>
                 <NavBar className='header' onBack={() => { this.back() }}>注册</NavBar>
                <div className="register_main">
                    <Form layout='horizontal' ref='fromRef' onValuesChange={(changedValues, allValues) => { this.kk(changedValues) }}>
                        <Form.Item style={{ paddingLeft: 0 }} name='phone'>
                            <Input placeholder='请输入手机号' clearable />
                        </Form.Item>
                    </Form>
                </div>
                <div className="register_bottom">
                    <div className={'register_next ' + (this.state.active ? 'liang' : '')} onClick={() => { this.next() }}>下一步</div>
                </div>
            </div>
        );
    }
}

export default Register;